<template>
  <div>
       <Myhead></Myhead>
    <div class="bag-box">
      <div class="img-box">
        <img src="@/assets/loans.jpg" alt="" />
        <h4>申请房先森装修贷</h4>
        <img src="@/assets/lan.png" class="lan" alt="" />
        <div class="from">
          <input class="in" type="text" placeholder="电话" /><br />
          <input class="in" type="text" placeholder="小区名" /><br />
          <input class="in" type="text" placeholder="建筑面积" /><br />
          <button>立即申请</button>
        </div>
        <img src="@/assets/zi.png" alt="" />
        <h4>申请流程</h4>
        <img src="@/assets/lan.png" class="lan" alt="" />
        <img src="@/assets/zhang.png" alt="" />
        <h4>申请条件</h4>
        <img src="@/assets/lan.png" class="lan" alt="" />
        <img src="@/assets/liu.png" alt="" />
        <img src="@/assets/xia.png" class="xia" alt="" />
      </div>
    </div>
    <!-- <bot /> -->
    <Myfoot></Myfoot>
  </div>
</template>

<script>
// import headers from "@/components/"
// import bot from "@/components/Bottom.vue";
import Myhead from '@/components/Myhead'
import Myfoot from '@/components/Myfoot'
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {
    // bot,
    Myhead,
    Myfoot
  },
};
</script>

<style lang='scss'>
.bag-box {
  width: 100%;
  height: 2020px;
  .img-box {
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
    h4 {
      text-align: center;
    }
    .lan {
      width: 100%;
      height: 20px;
    }
    .xia {
      height: 750px;
      width: 100%;
    }
    .from {
      width: 100%;
      height: 220px;
      text-align: center;
      .in {
        width: 80%;
        height: 30px;
        margin: 5px;
        // margin-left: 10%;
      }
      button {
        margin: 5px;
        width: 79%;
        height: 30px;
        background-color: #feb605;
        border: none;
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
}
</style>
